@import "./common";

@function getvw($w) {
    @return($w/1920)*100+vw;
}

;

.box {
    .center {
        width: 100%;
        max-width: getvw(1900);
        margin: 0 auto;
        min-width: getvw(900);

        .nav {
            .nav_right {
                ul {
                    li:nth-of-type(3) {
                        height: 65px;
                        text-align: center;
                        line-height: 65px;
                        border-bottom: 1px solid #19bc64;
                        a {
                            color: #19bc64;
                        }
                    }
                }
            }
        }

        .banner {
            width: 100%;
            height: getvw(680);
            position: relative;

            img {
                width: getvw(1900);
                height: getvw(680);
            }

            div:nth-of-type(1) {
                position: absolute;
                top: getvw(230);
                left: getvw(580);

                p:nth-of-type(1) {
                    color: white;
                    font-size: getvw(70);
                }

                p:nth-of-type(2) {
                    color: white;
                    font-size: getvw(16);
                    text-align: center;
                    font-weight: 100;
                }
            }

            div:nth-of-type(2) {
                position: absolute;
                width: getvw(185);
                height: getvw(205);
                top: getvw(470);
                left: getvw(880);

                p:nth-of-type(1) {
                    text-align: center;
                    font-size: getvw(14);
                    color: #beb1a3;
                    position: relative;
                }

                p:nth-of-type(1):after {
                    content: '';
                    position: absolute;
                    width: getvw(38);
                    height: getvw(1);
                    top: getvw(30);
                    left: getvw(73);
                    background-color: white;
                }

                p:nth-of-type(2) {
                    color: white;
                    font-size: getvw(22);
                    text-align: center;
                    margin-top: getvw(20);
                }

                div {
                    width: getvw(137);
                    height: getvw(36);
                    border: white 1px solid;
                    color: white;
                    text-align: center;
                    line-height: getvw(36);
                    position: absolute;
                    top: getvw(90);
                    left: getvw(22);
                    font-size: getvw(14);
                }

                div::after {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: white;
                    position: absolute;
                    top: getvw(18);
                    left: getvw(10);
                }

                div::before {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: white;
                    position: absolute;
                    top: getvw(18);
                    right: getvw(10);
                }

                i {
                    color: white;
                    position: absolute;
                    top: getvw(180);
                    left: getvw(80);
                }
            }

        }

        .urban_chic {
            box-sizing: border-box;
            text-align: center;
            padding-top: getvw(90);

            .urban_chic_title {
                p:nth-of-type(1) {
                    width: getvw(270);
                    height: getvw(30);
                    text-align: center;
                    margin: 0 auto;
                    font-size: getvw(35);
                    line-height: 1;
                    font-weight: 200;
                }

                p:nth-of-type(2) {
                    color: #c9a97c;
                    font-size: getvw(24);
                    margin-top: getvw(10);
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    left: getvw(860);
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    right: getvw(860);
                }

            }

            .urban_chic_main{
                width: getvw(1190);
                height: getvw(740);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                color: #999999;
                font-size: getvw(24);
                letter-spacing: getvw(2);

                div:nth-of-type(1){
                    width: getvw(312);
                    height: getvw(530);
                    margin-top: getvw(35);

                    img{
                        width: 100%;
                    }
                    p{
                        margin-top: getvw(20);
                    }
                }
                div:nth-of-type(2){
                    width: getvw(404);
                    height: getvw(665);
                    margin-top: getvw(50);

                    img{
                        width: 100%;
                    }
                    p{
                        margin-top: getvw(20);
                    }
                }
                div:nth-of-type(3){
                    width: getvw(332);
                    height: getvw(650);
                    margin-top: getvw(17);

                    img{
                        width: 100%;
                    }
                    p{
                        margin-top: getvw(20);
                    }
                }
            }

        }

        .sparkling_city{

            .sparkling_city_title {
                margin-top: getvw(30);
                height: getvw(153);
                text-align: center;
                p:nth-of-type(1) {
                    width: getvw(270);
                    height: getvw(30);
                    text-align: center;
                    margin: 0 auto;
                    font-size: getvw(35);
                    line-height: 1;
                    font-weight: 200;
                }

                p:nth-of-type(2) {
                    color: #c9a97c;
                    font-size: getvw(24);
                    margin-top: getvw(10);
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    left: getvw(860);
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    right: getvw(860);
                }

            }

            .sparkling_city_main{
                width: getvw(1900);

                img{
                    width: getvw(1900);
                }

                div:nth-of-type(1){
                    width: getvw(1091);
                    height: getvw(748);
                    margin: 0 auto;
                    border: getvw(10) solid #bebebe;
                    position: relative;

                    img:nth-of-type(1){
                        width: getvw(690);
                        height: getvw(486);
                        position: absolute;
                        top: getvw(55);
                        left: getvw(-60);
                    }
                    img:nth-of-type(2){
                        width: getvw(302);
                        height: getvw(302);
                        position: absolute;
                        bottom: getvw(10);
                        right: getvw(-44);
                    }
                    p{
                        font-size: getvw(16);
                        letter-spacing: getvw(2);
                        color: #666666;
                        position: absolute;
                        top: getvw(152);
                        right: getvw(78);
                        line-height: getvw(30);
                    }
                }
                div:nth-of-type(2){
                    width: getvw(1145);
                    height: getvw(530);
                    margin: 0 auto;
                    box-sizing: border-box;

                    img:nth-of-type(1){
                        width: getvw(678);
                        float: right;
                        margin-top: getvw(60);
                    }
                    
                    img:nth-of-type(2){
                        width: getvw(225);
                        margin-top: getvw(130);
                    }
                    img:nth-of-type(3){
                        width: getvw(188);
                        margin-top: getvw(130);
                        margin-left: getvw(40);
                    }
                    p{
                        width: getvw(370);
                        height: getvw(100);
                        text-align: right;
                        font-size: getvw(16);
                        color: #666666;
                        margin: getvw(45) 0 0 getvw(38);
                        line-height: getvw(27);
                    }
                    button{
                        width: getvw(150);
                        height: getvw(42);
                        border-radius: getvw(30);
                        border: 1px solid #666666;
                        background-color: white;
                        color: #666666;
                        margin: getvw(42) 0 0 getvw(260);
                        cursor: pointer;
                    }
                }
            }
        }

        .maple_whisper{
            .maple_whisper_title {
                margin-top: getvw(60);
                height: getvw(123);
                text-align: center;
                p:nth-of-type(1) {
                    width: getvw(270);
                    height: getvw(30);
                    text-align: center;
                    margin: 0 auto;
                    font-size: getvw(35);
                    line-height: 1;
                    font-weight: 200;
                }

                p:nth-of-type(2) {
                    color: #c9a97c;
                    font-size: getvw(24);
                    margin-top: getvw(10);
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    left: getvw(860);
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    right: getvw(860);
                }

            }
            .maple_whisper_main{
                img{
                    width: getvw(1920);
                }
                
            }
            .maple_whisper_main2{
                width: 1200px;
                margin: 0 auto;

                .maple_whisper_main2_top{
                    width: 1200px;
                    height: 645px;
                    position: relative;

                    p:nth-of-type(1){
                        font-size: getvw(22);
                        color: #666666;
                        margin: 80px 0 0 60px;
                        width: 313px;
                    }
                    p:nth-of-type(2){
                        text-align: left;
                        font-size: getvw(16);
                        line-height: 25px;
                        color: #666666;
                        width: 313px;
                        margin: 24px 0 0 60px;
                    }
                    img:nth-of-type(1){
                        margin-top: 57px;
                    }
                    button{
                        width: getvw(150);
                        height: getvw(42);
                        border-radius: getvw(30);
                        border: 1px solid #666666;
                        background-color: white;
                        color: #666666;
                        cursor: pointer;
                        position: absolute;
                        bottom: 80px;
                        left: 62px;
                    }
                    img:nth-of-type(2){
                        position: absolute;
                        top: -10px;
                        right: 0px;
                    }
                }
                .maple_whisper_main2_bottom{
                    display: flex;
                    justify-content: space-between;
                    position: relative;

                    p:nth-of-type(1){
                        position: absolute;
                        top: 300px;
                        left: 125px;
                        font-size: getvw(16);
                        color: #3f3f3f;
                        font-weight: 600;
                    }
                    p:nth-of-type(2){
                        position: absolute;
                        top: 300px;
                        left: 540px;
                        font-size: getvw(16);
                        color: #3f3f3f;
                        font-weight: 600;
                    }
                    p:nth-of-type(3){
                        position: absolute;
                        top: 300px;
                        left: 930px;
                        font-size: getvw(16);
                        color: #3f3f3f;
                        font-weight: 600;
                    }
                }
            }
        }

        .folding_city{
            .folding_city_title {
                margin-top: getvw(60);
                height: getvw(123);
                text-align: center;
                p:nth-of-type(1) {
                    width: getvw(270);
                    height: getvw(30);
                    text-align: center;
                    margin: 0 auto;
                    font-size: getvw(35);
                    line-height: 1;
                    font-weight: 200;
                }

                p:nth-of-type(2) {
                    color: #c9a97c;
                    font-size: getvw(24);
                    margin-top: getvw(10);
                    position: relative;
                }

                p:nth-of-type(2)::after {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    left: getvw(860);
                }

                p:nth-of-type(2)::before {
                    content: '';
                    width: getvw(30);
                    height: getvw(1);
                    background-color: #b8b8b8;
                    position: absolute;
                    top: getvw(17);
                    right: getvw(860);
                }

            }
            .folding_city_main{
                img{
                    width: 1900px;
                }
            }
            .folding_city_main2{
                width: 1200px;
                margin: 0 auto;

                .folding_city_main2_top{
                    width: 1200px;
                    height: 645px;
                    position: relative;

                    p:nth-of-type(1){
                        font-size: getvw(22);
                        color: #666666;
                        margin: 80px 0 0 60px;
                        width: 313px;
                    }
                    p:nth-of-type(2){
                        text-align: left;
                        font-size: getvw(16);
                        line-height: 25px;
                        color: #666666;
                        width: 313px;
                        margin: 24px 0 0 60px;
                    }
                    img:nth-of-type(1){
                        margin-top: 57px;
                    }
                    button{
                        width: getvw(150);
                        height: getvw(42);
                        border-radius: getvw(30);
                        border: 1px solid #666666;
                        background-color: white;
                        color: #666666;
                        cursor: pointer;
                        position: absolute;
                        bottom: 80px;
                        left: 62px;
                    }
                    img:nth-of-type(2){
                        position: absolute;
                        top: -10px;
                        right: 0px;
                    }
                }
                .folding_city_main2_bottom{
                    display: flex;
                    flex-wrap: wrap;
                    position: relative;
                    p{
                        font-size: getvw(16);
                        color: #3f3f3f;
                        font-weight: 600;
                    }

                    p:nth-of-type(1){
                        position: absolute;
                        top: 300px;
                        left: 125px;
                    }
                    p:nth-of-type(2){
                        position: absolute;
                        top: 300px;
                        left: 560px;
                    }
                    p:nth-of-type(3){
                        position: absolute;
                        top: 300px;
                        left: 950px;
                    }
                    p:nth-of-type(4){
                        position: absolute;
                        top: 650px;
                        left: 125px;
                    }
                    p:nth-of-type(5){
                        position: absolute;
                        top: 650px;
                        left: 530px;
                    }
                    p:nth-of-type(6){
                        position: absolute;
                        top: 650px;
                        left: 950px;
                    }
                }
            }
        }
    }
}